<template>
    <a-card title="区域应急管理">
        <a-table :columns="columns" :dataSource="data">
            <span slot="mf_qy" slot-scope="item">
                <a-switch :checked="item.mf_qy === 1" checked-children="是" un-checked-children="否"
                          @change="editArea(item)"></a-switch>
            </span>
            <span slot="action" slot-scope="item">
              <a-button size="small" type="primary" @click="edit(item.key)">编辑</a-button>
            </span>
        </a-table>

        <a-modal
            :title="emergencyData === null ? '添加区域应急管理':'编辑区域应急管理'"
            :visible="visible"
            @cancel="visible=false"
            @ok="handleOk"
        >

            <a-form :form="addLayerOneFrom" :label-col="{ span: 5, offset: 0}" :wrapper-col="{ span: 19 }">
                <a-form-item label="住建局电话">
                    <a-input
                        v-decorator="
                        ['fzr_ac', {
                            rules:  [
                                        { required: false, message: '请输入负责人电话!' },
                                        {max: 11, message: '电话号码的长度不能超过11位'}
                                    ]
                            }
                        ]"
                        allow-clear/>
                </a-form-item>
                <a-form-item label="施工方电话">
                    <a-input
                        v-decorator="['gd_ac', { rules: [{ required: false, message: '请输入工地电话!' },
                        {max: 11, message: '电话号码的长度不能超过11位'}] }]"
                        allow-clear/>
                </a-form-item>
                <a-form-item label="环保局电话">
                    <a-input
                        v-decorator="['glj_zc', { rules: [{ required: false, message: '请输入管理局电话!' },
                        {max: 11, message: '电话号码的长度不能超过11位'}] }]"
                        allow-clear/>
                </a-form-item>
                <a-form-item label="街道办电话">
                    <a-input
                        v-decorator="['jdb_ac', { rules: [{ required: false, message: '请输入街道办电话!' },
                        {max: 11, message: '电话号码的长度不能超过11位'}] }]"
                        allow-clear/>
                </a-form-item>
            </a-form>

        </a-modal>

    </a-card>
</template>

<script>
import {METHOD, request, RESPONSE} from "../../utils/request";
import {getNodeFromTreeByLevel} from "../../utils/util";

export default {
    name: "index",
    data() {
        return {
            phoneRegexp: /(13\d|14[579]|15[^4\D]|17[^49\D]|18\d)\d{8}/,
            addLayerOneFrom: this.$form.createForm(this, {name: 'coordinated'}),
            visible: false,
            data: [],
            emergencyData: null,
            currentEditEmergencyKey: null,
        }
    },
    setup() {
        return {
            columns: [
                {
                    title: '工地名',
                    dataIndex: 'title',
                    key: 'title',
                },
                {
                    title: '标杆工地',
                    key: 'mf_qy',
                    scopedSlots: {customRender: 'mf_qy'},
                },
                {
                    title: '操作',
                    key: 'action',
                    scopedSlots: {customRender: 'action'},
                },
            ],
        };
    },
    mounted() {
        this.userID = JSON.parse(localStorage.getItem(process.env.VUE_APP_USER_KEY)).id;

        this.getAreas();
    },
    methods: {
        getAreas() {
            request("/areas/getAreas", METHOD.GET, {
                id: this.userID
            }).then(res => {
                if (res.data.code === RESPONSE.SUCCESS_CODE) {
                    this.data.length = 0;
                    getNodeFromTreeByLevel(res.data.data, 3, this.data);
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        handleOk() {
            this.addLayerOneFrom.validateFields((err, values) => {
                if (!err) {
                    // **后端偏要用userid这个名字代表区域（Area)的key字段
                    values.userid = this.currentEditEmergencyKey;
                    this.visible = false;

                    if (this.emergencyData === null) {
                        request("/Contingency/saveContingency", METHOD.POST, values).then(res => {
                            if (res.data.code === RESPONSE.SUCCESS_CODE) {
                                this.$message.success(res.data.data);
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                    } else {
                        request("/Contingency/updatecontingencyByid", METHOD.PUT, values).then(res => {
                            if (res.data.code === RESPONSE.SUCCESS_CODE) {
                                this.$message.success(res.data.data);
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                    }
                }
            });
        },
        edit(key) {
            // 记录当前编辑的区域
            this.currentEditEmergencyKey = key;

            // 查询是否存在应急管理，没有新增，有就修改
            request("/Contingency/getcontingencyByid", METHOD.GET, {userid: key}).then(res => {
                if (res.data.code === RESPONSE.SUCCESS_CODE) {
                    this.emergencyData = res.data.data;
                    if (this.emergencyData != null) {
                        this.$nextTick(() => {
                            this.addLayerOneFrom.setFieldsValue(this.emergencyData);
                        })
                    } else {
                        this.addLayerOneFrom.resetFields();
                    }
                } else {
                    this.$message.error(res.data.msg);
                }
                // 新增还是编辑都要打开弹窗
                this.visible = true
            })
        },
        editArea(item) {
            item.stu = 3
            item.mf_qy = item.mf_qy === 1 ? 0 : 1;
            request("/adminSyssz/editareas", METHOD.POST, item).then(res => {
                if (res.data.code !== RESPONSE.SUCCESS_CODE) {
                    this.$message.error(res.data.msg);
                } else {
                    this.$message.success("修改成功");
                    this.getAreas();
                }
            })
        }
    }
};
</script>

<style scoped>

</style>
